<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas实例1-时钟</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">
        您的浏览器不支持 Canvas!
    </canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        function drawClock() {
            //清除画布
            ctx.clearRect(0, 0, 500, 500);

            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            min = min + sec / 60;
            var hour = now.getHours();
            hour = hour + min / 60;

            //表盘(蓝色)
            ctx.save();
            ctx.lineWidth = 10;
            ctx.strokeStyle = "#4F9CEE";
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.arc(0, 0, 200, 0, 360, false);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //刻度(黑色)
            //小时刻度
            for (var i = 0; i < 12; i++) {
                ctx.save();
                ctx.lineWidth = 7;
                ctx.strokeStyle = "black";
                ctx.beginPath();
                ctx.translate(250, 250);
                ctx.rotate(i * 30 * Math.PI / 180);
                ctx.moveTo(0, -190);
                ctx.lineTo(0, -170);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            //分钟刻度
            for (var i = 0; i < 60; i++) {
                ctx.save();
                ctx.lineWidth = 5;
                ctx.strokeStyle = "black";
                ctx.beginPath();
                ctx.translate(250, 250);
                ctx.rotate(i * 6 * Math.PI / 180);
                ctx.moveTo(0, -190);
                ctx.lineTo(0, -180);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            //时针(黑色)
            ctx.save();
            ctx.lineWidth = 7;
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(hour * 30 * Math.PI / 180);
            ctx.moveTo(0, -130);
            ctx.lineTo(0, 10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //分针(黑色)
            ctx.save();
            ctx.lineWidth = 5;
            ctx.strokeStyle = "blue";
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(min * 6 * Math.PI / 180);
            ctx.moveTo(0, -150);
            ctx.lineTo(0, 10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //秒针(红色)需美化
            ctx.save();
            ctx.lineWidth = 3;
            ctx.strokeStyle = "green";
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(sec * 6 * Math.PI / 180);
            ctx.moveTo(0, -170);
            ctx.lineTo(0, 10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //中间画个小圆点
            ctx.save();
            ctx.lineWidth = 2;
            ctx.fillStyle = "gray"
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.arc(0, 0, 7, 0, 360, false);
            ctx.closePath();
            ctx.fill();
            ctx.strokeStyle = "green";
            ctx.stroke();
            ctx.restore();
            //秒针前段画个小圆点
            ctx.save();
            ctx.lineWidth = 2;
            ctx.fillStyle = "white"
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(sec * 6 * Math.PI / 180);
            ctx.arc(0, -140, 5, 0, 360, false);
            ctx.closePath();
            ctx.fill();
            ctx.strokeStyle = "green";
            ctx.stroke();
            ctx.restore();
        }
        drawClock();
        setInterval(drawClock, 1000);
    </script>
</body>

</html>